import { CommonSmallTitle, TitleSmall001 } from '../../Assets/Common/SmallTitle'
import { SixFivDataOne } from '../Data'

const ListTemplate = () => {
    const Top = [
        { uuid: 1, label: '文件名称', flex: 3 },
        { uuid: 2, label: '上传时间', flex: 1 },
    ]

    return (
        <div className="List">
            <div>
                {Top.map(({ uuid, label, flex }) => (
                    <div key={uuid} style={{ flex }}>
                        {label}
                    </div>
                ))}
            </div>
            <div>
                {SixFivDataOne.map(({ uuid, label, value }) => (
                    <div key={uuid}>
                        <div style={{ flex: Top[0].flex }}>{label}</div>
                        <div style={{ flex: Top[1].flex }}>{value}</div>
                    </div>
                ))}
            </div>
        </div>
    )
}

export const SixFiv = () => {
    return (
        <>
            <CommonSmallTitle title="预案文档" style={{ marginRight: 16 }}>
                <TitleSmall001 title="综合预案" />
                <ListTemplate />
                <TitleSmall001 title="专项预案" />
                <ListTemplate />
                <TitleSmall001 title="现场处理预案" />
                <ListTemplate />
            </CommonSmallTitle>
            <div className="right">
                <CommonSmallTitle title="组织结构" style={{ marginBottom: 16 }}>
                    <ListTemplate />
                </CommonSmallTitle>
                <CommonSmallTitle title="应急人员与物资">
                    <ListTemplate />
                </CommonSmallTitle>
            </div>
        </>
    )
}
